import Vue from "vue";
import Vuex from "vuex";
//引入vuex持久化存储方案的插件
import createPersistedState from "vuex-persistedstate"

import * as payApi from "@/api/pay"
import * as permissionApi from "@/api/permission"
import * as stuApi from "@/api/studentManager";
//引入递归路由的方法
import recursionRoutes from "@/utils/recursionRoutes"
//引入所有的路由
import allRoutes from "@/router/generateRoutes"
//引入动态路由
import dynamicRoutes from "@/router/dynamicRoutes";
//console.log(dynamicRoutes);
import router from "@/router";
//console.log(allRoutes);
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userMenu: [],//侧边栏菜单
    userInfo: {},//用户信息
    currentProduct: {},//当前的充值产品对象
    breadCrumb: [],//面包屑数据  
    dialogFormVisible: false,//控制dialog显示和隐藏的属性
    dialogTitle: "增加学员信息",//控制dialog的标题
    stuData: [],//学员项目管理表格数据
    loading: true,//控制学员项目管理表格加载前的动画开始和关闭的变量
    currentRow: {},//编辑的时候，dialog 回显的表格 数据
    stuPageSize: 10,//每页显示的条数
    stuTotal: 0,//总条目数
    singleStuData: [],
    currentUserRow: {},//需要回显的当前用户信息
  },
  getters: {},
  mutations: {
    //设置userDialog中需要回显的当前用户信息
    SET_CURRENTUSER_ROW(state,payload){
      state.currentUserRow=payload
    },
    SET_MENULIST(state,payload){
      state.userMenu=[...payload]
      //console.log(state.userMenu);
      //console.log(payload);
      //动态添加路由，引入dynamic路由，进行匹配，匹配到path="/"这个对象，让我们用户路由中的结果等于这个对象的children
      let target=dynamicRoutes.find(route=>route.path==="/")
      target.children=[...payload,...target.children]
      //console.log(target);
      //引入router，动态将路由添加到根路由的routes选项中
      //动态添加路由，参数是一个对象，这个对象必须符合routes的配置
      router.addRoute(target)
    },
    SET_USERINFO(state,payload){
      state.userInfo=payload
    },
    //设置当前充值的产品
    SET_CURRENTPRODUCT(state,payload){
      state.currentProduct=payload
    },

    //设置面包屑
    SET_BREADCRUMB(state,payload){
      state.breadCrumb=payload
    },
    
    //设置点击查看按钮之后获得的singelStuData
    SET_SINGLE_DATA(state,payload){
      state.singleStuData=payload
      console.log(payload);
    },

    //设置学员项目管理表格中的数据
    SET_STU_DATA(state,payload){
      state.stuData=payload.data//设置学员列表
      state.loading=false//获得学员管理表格数据之后关闭加载动画
      state.stuTotal=payload.total//设置学员分页总数
    },
    //显示dialog
    SHOW_DIALOG(state){
      state.dialogFormVisible=true
    },
    //隐藏dialog
    HIDE_DIALOG(state){
      state.dialogFormVisible=false
    },
    //修改dialogTitle
    CHANGE_DIALOG_TITLE(state,payload){
      state.dialogTitle=payload
    },
    //表格显示loading
    SHOW_LOADING(state){
      state.loading=true
    },
    //表格隐藏loading
    HIDE_LOADING(state){
      state.loading=false
    },
    //修改dialog表格回显数据
    SET_CURRENT_ROW(state,payload){
      state.currentRow={...payload}
    }
  },
  actions: {
    async FETCH_MENULIST(context, payload) {
      return permissionApi.getMenuList().then(res => {
        //console.log(res);
        let {menuList}=res.data
        //console.log(menuList);
        // //调用recursionRoutes
        let userRoutes=recursionRoutes(allRoutes[0].children,menuList)
        //console.log(userRoutes);
        context.commit("SET_MENULIST",userRoutes)
      })
    },

    //获取学员项目管理表格数据
    GET_STU_LIST({commit},payload={}){
      commit("SHOW_LOADING")//打开获取学员项目管理数据之前的加载动画
      let {page=1,count=10,classes=""}=payload//解构传递的参数
      stuApi.getStudentInfo(page,count,classes)
      .then(res=>{
        commit("SET_STU_DATA",res.data)
        //console.log(res);
      })
    },

     
  },
  modules: {},
  //vuex数据持久化配置
  plugins: [
    createPersistedState({
      //存储方式 localStorage sessionStorage cookie
      storage: window.localStorage,
      //存储的key值
      key: "yz",
      //缓存的内容为userInfo
      paths: ["userInfo","currentProduct"] 
    })
  ]
});
